Vue.component('come-prop', {
  props: {
    showinput: {
      type: Boolean,
      default: true
    }
  },
  template:
`
<div style="display: flex">
  <comb-input
      v-show="showinput"
      ref="comb"
      :value="model.val"
      :list="list"
      @change="onFormChange('val', $event)"></comb-input>
  <el-button size="small" @click="handleAdd">add</el-button>
</div>
`,
  data() {
    let div = document.createElement('div')
    let list = Object.keys(div.style)
    list = list.map(v => { return _.kebabCase(v) }).filter(v => {
      if (v.startsWith('b')) {
        return v
      }
      return v
    })
    return {
      model: {
        val: ''
      },
      parsedModel: {},
      list: list
    }
  },
  methods: {
    onFormChange(key, e) {
      // console.log(key, e)
      this.$nextTick(() => {
        this.$set(this.parsedModel, key, e)
      })
    },
    handleAdd() {
      if (!this.showinput) {
        this.$emit('change', 'ctp')
        this.$refs.comb.reset()
        return
      }
      if (!this.parsedModel.val) {
        window.XyMessage.error('输入首字母为字母的字符串')
      } else {
        let validateSelRegexp = /^[:a-zA-Z]{1}[\w-:]*$/g
        let isPassed = validateSelRegexp.test(this.parsedModel.val)
        if (!isPassed) {
          window.XyMessage.error('输入首字母为字母的字符串')
        } else {
          this.$emit('change', this.parsedModel.val)
          console.log( this.$refs.comb)
          this.$refs.comb.reset()
        }
      }
    }
  },
})

Vue.component('come-demo', {
  template:
    `
<div>
  <h3>普通选择</h3>
  <div>{{model}}</div>
  <come-prop @change="onFormChange"></come-prop>
</div>
`,
  data() {
    return {
      model: {}
    }
  },
  methods: {
    onFormChange(propName) {
      this.$set(this.model, propName, null)
    }
  },
})
